<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <title><th:block th:text="${i18n.key30}"></th:block></title>
    <meta name="keywords" th:content="${companyProfile.seoKeyword}"/>
    <meta name="description" th:content="${companyProfile.seoDescription}"/>
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../static/css/css.css">
    <link rel="stylesheet" href="../static/css/product.css">
</head>
<body ontouchstart="" data-ind="2">
<style>
    table {
        margin: 0px auto;
    }
</style>
<!--#include file="/public/html/header.html"-->
<div th:replace="header :: header"></div>

<!-- <div class="leg"></div> -->
<div id="banner-box">
    <img src="http://120.25.100.147/uploads/nrd/product-video.jpg" alt="banner">
    <div class="inbox">
        <div class="title-box">
            <div class="cn wow fadeInUp_qs50" ms="ms"><th:block th:text="${i18n.key30}"></th:block></div>
        </div>
        <div class="info wow fadeInUp_qs50" ms="ms"></div>
    </div>
</div>

<div class="pro_class">
    <div class="wrap clearfix">
        <div class="pro-sidebar wow fadeInLeft_qs50" ms="ms">
            <div class="pro-title">
                <div class="big-title">产品视频</div>
                <div class="small-title">Product video</div>
            </div>
            <ul class="level_2">
                <!-- 点击一级时的高亮状态 act_level_2_li -->
                <li class="level_2_li " th:each="c, s1: ${category}">
                    <div class="show-li clearfix">
                        <div class="icon"></div>
                        <a th:href="'/product_video?s=' + ${c.id} + '&type=' + ${s1.index}"><span th:text="${session.lang == 'en' ? c.nameEn : c.name}"></span></a>
                    </div>
                    <ul class="level_3" th:if="${c.productList != null && !c.productList.isEmpty()}">
                        <li class="level_3_li " th:each="cp, s2: ${c.productList}"><a block="" th:href="'/product_video?s=' + ${c.id} + '&p=' + ${cp.id} + '&type=' + ${s1.index} + '&index=' + ${s2.index}" rel="noopener noreferrer" th:text="${session.lang == 'en' ? cp.titleEn : cp.title}">手持式合金分析仪</a></li>
                    </ul>
                </li>

            </ul>
        </div>

        <div class="pro-content">
            <div class="content-title"><span><th:block th:text="${i18n.key31}"></th:block></span></div>
            <ul class="pro-ul clearfix">
                <li class="pro-li wow fadeInUp_qs50" ms="ms" th:each="v, status: ${videoList}">
                    <a th:href="'/video_detail_' + ${v.id} + '?p=' + ${v.videoUrl}" block="" rel="noopener noreferrer">
                        <div class="imgbox">
                            <iframe style="display:block;width:100%;height:100%;" frameborder="0" th:src="${v.videoUrl}" referrerpolicy="unsafe-url" allowfullscreen></iframe>
                        </div>
                        <div class="text-box">
                            <div class="title over" th:text="${session.lang == 'en' ? v.titleEn : v.title}">全自动影像测量仪</div>
                        </div>
                    </a>
                </li>

            </ul>
            <div class='pages'></div>
        </div>
    </div>
</div>
<!--#include file="/public/html/footer.html"-->
<div th:replace="footer :: footer"></div>
</body>
<script src="../static/js/swiper-3.4.2.min.js"></script>
<script src="../static/js/jquery-1.11.3.min.js"></script>
<script src="../static/js/wow.min.js"></script>
<script src="../static/js/common.js"></script>
<script src="../static/js/utils.js"></script>
<script type="text/javascript">
    $(function () {
        var _params = getQueryParams()
        $('.level_2_li').eq(_params.type).addClass('act_level_2_li').find('.level_3_li').eq(_params.index).addClass(
            'act_level_3_li')

        var proBanner = creatSwiper("#probanner", {
            loop: true
        })
        $(".pro-sidebar .level_2 .level_2_li .show-li").on("click", function () {
            var par = $(this).parent();
            par.toggleClass("act_level_2_li");
            par.siblings().removeClass("act_level_2_li");
        })
    })
</script>
<script>
    $(function () {
        var curpage = 1;
        var pagecount = 0;

        $("#more").click(function () {
            curpage++;
            loadingList();
        })

        function loadingList() {
            $.ajax({
                url: '/Ajax/Handler.ashx',
                type: 'post',
                dataType: "json",
                data: {
                    'type': 'GetProList',
                    'classId': '103',
                    'pagesize': '6',
                    'page': curpage
                },
                success: function (data) {
                    dataList = data;
                    var html = "";
                    for (var i = 0; i < dataList.length; i++) {
                        if (i >= dataList.length) {
                            break;
                        }
                        html += '<li class="pro-li wow fadeInUp_qs50" ms="ms">';
                        html += '<a href="proDetail_' + dataList[i].BsId + '.html"  rel="noopener noreferrer" block>';
                        html += '<div class="imgbox">';
                        html += '<img src="' + dataList[i].ImgUrl + '" alt="">';
                        html += '</div>';
                        html += '<div class="text-box">';
                        html += '<div class="title over">' + dataList[i].Title + '</div>';
                        html += '</div>';
                        html += '</a>';
                        html += '</li>';
                    }
                    $(".pro-ul").append(html);
                    if (curpage >= pagecount) {
                        $("#more").remove();
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            });

        }

        function getFDate(date) {
            var d = eval('new ' + date.substr(1, date.length - 2));

            var ar_date = [d.getFullYear(), d.getMonth() + 1, d.getDate()];

            for (var i = 0; i < ar_date.length; i++) ar_date[i] = dFormat(ar_date[i]);
            return ar_date.join('/');
        }

        function dFormat(i) {
            return i < 10 ? "0" + i.toString() : i;
        }

        function Replacestring(string) {
            if (string) {
                return string.replace(/\r\n/g, "</br>");
            } else {
                return "";
            }
        }
    })
</script>

</html>